<template>
  <div>
    <div ref="pieChart" :style="{ width: '405px', height: '300px' }"></div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
//绘制饼图
const option = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    right: '5%',
    top: '20%',
    icon: 'circle',
    textStyle: {
      color: '#333',
      fontSize: 20
    },
    data: ['正常值', '偏高值', '偏低值']
  },
  series: [
    {
      name: '指标值',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: true,
        position: 'center',
        color: '#333'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [
        {
          value: 50,
          name: '正常值',
          itemStyle: {
            color: 'rgba(53,130,247,0.6)',
            borderColor: 'rgba(53,130,247,0.8)',
            borderWidth: 3,
            shadowColor: 'rgba(53,130,247,0.8)',
            shadowBlur: 10
          }
        },
        {
          value: 30,
          name: '偏高值',
          itemStyle: {
            color: 'rgba(244,201,7,0.5)',
            borderColor: 'rgba(244,201,7,0.8)',
            borderWidth: 3,
            shadowColor: 'rgba(244,201,7,0.8)',
            shadowBlur: 10
          }
        },
        {
          value: 20,
          name: '偏低值',
          itemStyle: {
            color: 'rgba(25,236,176,0.5)',
            borderColor: 'rgba(25,236,176,0.8)',
            borderWidth: 3,
            shadowColor: 'rgba(25,236,176,0.8)',
            shadowBlur: 10
          }
        }
      ],
      center: ['35%', '50%']
    }
  ]
};
const pieChart = ref<HTMLElement>();
const myChart2 = ref<any>();
function initPieEcharts() {
  myChart2.value = echarts.init(pieChart.value!)
  myChart2.value.setOption(option)
}

onMounted(() => {
  initPieEcharts()
});
</script>